<!-- 设备监测指标组件 -->
<template>
  <div class="device-index" ref="index_ref"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "",
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  created() {},
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.index_ref);
      var option = {
        backgroundColor: "#091C3D",
        title: {
          text: "设备监测指标",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          //提示框组件
          trigger: "axis",
          formatter: "{b}<br />{a0}: {c0}<br />{a1}: {c1}",
          axisPointer: {
            type: "shadow",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "10%",
          top: "40%",
          containLabel: true,
        },
        legend: {
          //图例组件，颜色和名字
          right: "10%",
          top: "30%",
          itemGap: 16,
          itemWidth: 18,
          itemHeight: 10,
          data: ["在线率", "连通率", "时延连通率", "使用异常"],
          textStyle: {
            color: "#a8aab0",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "22:18",
              "22:23",
              "22:25",
              "22:28",
              "22:30",
              "22:33",
              "22:35",
              "22:40",
              "22:18",
              "22:23",
              "22:25",
              "22:28",
              "22:30",
              "22:33",
              "22:35",
              "22:40",
            ],
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              textStyle: {
                color: "#078ceb",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
              rotate: 50,
            },
            axisTick: {
              //坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {
              //坐标轴轴线相关设置
              lineStyle: {
                color: "#fff",
                opacity: 0.2,
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12,
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#fff"],
                opacity: 0.06,
              },
            },
          },
        ],
        series: [
          {
            name: "在线率",
            type: "bar",
            data: [
              10,
              15,
              30,
              45,
              55,
              60,
              62,
              80,
              80,
              62,
              60,
              55,
              45,
              30,
              15,
              10,
            ],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#5768EF",
                  },
                  {
                    offset: 1,
                    color: "#5768EF",
                  },
                ]),
                barBorderRadius: 50,
                borderWidth: 0,
              },
            },
          },
          {
            name: "连通率",
            type: "bar",
            data: [8, 5, 25, 30, 35, 55, 62, 78, 65, 55, 60, 45, 42, 15, 12, 5],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#69CBF2",
                  },
                  {
                    offset: 1,
                    color: "#69CBF2",
                  },
                ]),
                barBorderRadius: 50,
                borderWidth: 0,
              },
            },
          },
          {
            name: "时延连通率",
            type: "bar",
            data: [
              10,
              15,
              30,
              45,
              55,
              60,
              62,
              80,
              80,
              62,
              60,
              55,
              45,
              30,
              15,
              10,
            ],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#5768EF",
                  },
                  {
                    offset: 1,
                    color: "#5768EF",
                  },
                ]),
                barBorderRadius: 50,
                borderWidth: 0,
              },
            },
          },
          {
            name: "使用异常",
            type: "bar",
            data: [8, 5, 25, 30, 35, 55, 62, 78, 65, 55, 60, 45, 42, 15, 12, 5],
            barWidth: 10,
            barGap: 0, //柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#69CBF2",
                  },
                  {
                    offset: 1,
                    color: "#69CBF2",
                  },
                ]),
                barBorderRadius: 50,
                borderWidth: 0,
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  },
};
</script>

<style scoped>
.device-index {
  width: 100%;
  height: 100%;
}
</style>